<template>
  <div>
    <!--    头部导航-->
    <van-nav-bar left-arrow title="会员登录" @click-left="$router.back()" />
    <!--    手机号登录-->
    <div class="phone">
      <div class="call">手机号登录</div>
      <p>未注册的手机号登录后将自动注册</p>
      <div class="phone-coment">
        <div>
          <input
            v-model="phoneNum"
            maxlength="11"
            placeholder="请输入手机号码"
            type="text"
          />
        </div>
        <div>
          <input
            v-model="picCode"
            maxlength="4"
            placeholder="请输入图形验证码"
            type="text"
          />
          <img v-if="picUrl" :src="picUrl" alt="" @click="getPicCode" />
        </div>
        <div>
          <input
            v-model="phoneSms"
            maxlength="6"
            placeholder="请输入短信验证码"
            type="text"
          />
          <button @click="getSecond">
            {{
              totalSecond === Second
                ? "获取验证码"
                : Second + "秒后重新获取验证码"
            }}
          </button>
        </div>
      </div>
      <van-button
        class="login-but"
        color="linear-gradient(to right, #EDB338, #FC9313)"
        @click="login"
      >
        登录
      </van-button>
    </div>
  </div>
</template>
<script>
import { getPhone, getPicCode, login } from '@/api/login'
import { Toast } from 'vant'

export default {
  components: {},
  data () {
    return {
      picCode: '', // 用户输入的图形验证码
      picKey: '', // 接口中传递的图形验证码
      picUrl: '', // 接口中图形验证码的地址
      totalSecond: 60, // 总秒数
      Second: 60, // 当前秒数
      timer: null, // 定时器id
      phoneNum: '', // 手机号
      phoneSms: '' // 短信验证码
    }
  },
  computed: {},
  methods: {
    // 获取图形验证码
    async getPicCode () {
      const {
        data: {
          data: { base64, key }
        }
      } = await getPicCode()
      this.picUrl = base64 // 存储地址
      this.picKey = key // 存储唯一标识
    },
    // 校验手机号和图形验证码是否合法
    valid () {
      if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
        Toast('请输入正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.picCode)) {
        Toast('请输入正确的图形验证码')
        return false
      }
      return true
    },
    // 获取短信验证码
    async getSecond () {
      // 若没通过校验，则返回
      if (!this.valid()) {
        return
      }
      // 判断定时器开启的条件
      if (!this.timer && this.totalSecond === this.Second) {
        // 封装短信验证接口，发送请求（图形验证码，图形验证码值key，手机号）
        await getPhone(this.picCode, this.picKey, this.phoneNum)
        this.$toast('短信发送成功')
        // 开启定时器
        this.timer = setInterval(() => {
          this.Second--
          if (this.Second <= 0) {
            clearInterval(this.timer) // 清空定时器
            this.timer = null // 重置定时器id
            this.Second = this.totalSecond // 归位
          }
        }, 1000)
        // 发送请求，获取验证码
        this.$toast('发送成功，请注意查收')
      }
    },
    // 登录
    async login () {
      // 校验手机号和图形验证码
      if (!this.valid()) {
        return false
      }
      if (!/^\w{6}$/.test(this.phoneSms)) {
        this.$toast('请输入正确的手机验证码')
        return false
      }
      const {
        data: { data }
      } = await login(this.phoneNum, this.phoneSms)
      this.$store.commit('user/setUserinfo', data)
      // if (data.status === 200) {
      this.$toast('登录成功')
      this.$router.push('/')
      // }
    }
  },
  // 离开页面销毁定时器
  destroyed () {
    clearInterval(this.timer)
  },
  created () {
    this.getPicCode()
    clearInterval(this.timer)
  }
}
</script>
<style lang="less">
div {
  .van-nav-bar {
    .van-nav-bar__arrow {
      color: #7c7b77;
    }
  }

  .phone {
    margin: 60px 20px;

    .call {
      font-size: 25px;
      margin-bottom: 10px;
    }

    p {
      color: #c4c4c4;
    }

    .phone-coment {
      padding: 40px 0;

      div {
        border-bottom: 1px solid #dededd;
        display: flex;
        justify-content: space-between;

        input {
          line-height: 40px;
          padding: 13px 10px;
          border: none;
        }

        img {
          width: 100px;
          height: 40px;
          margin-top: 10px;
        }

        button {
          background-color: white;
          color: #ebb23c;
          border: none;
          font-size: 15px;
        }
      }
    }

    .login-but {
      width: 100%;
      border-radius: 20px;
    }
  }
}
</style>
